<template>
  <div>
    <el-card>
      <el-table
        :data="courseList"
        :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"
        class="c-width100 color-222 family-PingFangSC-Regular font-s12"
      >
        <el-table-column>
          <el-table-column align="center" label="名称" prop="name">
            <template slot-scope="scope">
              <img :src="scope.row.courseAvatar" width="80" height="80" />
              <p>{{scope.row.name}}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" label="价格" prop="price"></el-table-column>
          <el-table-column align="center" label="讲师" prop="lecturerName"></el-table-column>
          <el-table-column align="center" label="发布时间" prop="createdAt"></el-table-column>
          <el-table-column align="center" label="类型" >
          <template slot-scope="scope">
              <span v-if="scope.row.courseType == 0">视频</span>
              <span v-if="scope.row.courseType == 1">音频</span>
              <span v-if="scope.row.courseType == 2">图文</span>
          </template>


          </el-table-column>
        </el-table-column>
        <el-table-column width="210" align="center" label="操作">
          <template slot-scope="scope">
            <div class="text-alignL">
              <b @click="linkToEdit(scope.row.courseId)">编辑</b>
              <span class="color-409">|</span>
              <b
                @click="linkToDetail(scope.row.courseId, scope.row.courseType)"
              >{{ uploadText(scope.row.courseType) }}</b>
            </div>
            <div class="text-alignL">
              <b @click="handleDelete(scope.$index, scope.row.courseId)">删除</b>

              <span class="color-409">|</span>

              <b @click="messagePush(scope.$index)" v-show="wxPushShow">微信推送</b>

              <span class="color-409">|</span>
              <!--<span class="color-409" v-if="(scope.row.courseType==0 && videoPermisson==3) || (scope.row.courseType==1 && audioPermisson==3) || (scope.row.courseType==2 && articlePermisson==3)">|</span>-->
              <el-dropdown>
                <span class="el-dropdown-link">
                  更多
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <b style="padding:20px" @click="linkToCourseComment(scope.row.courseId)">课程评论</b>
                  <b style="padding:20px" @click="showMessageModel(scope.row)">消息推送</b>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="消息推送" :visible.sync="messageModel" width="50%" :before-close="handleClose">
      <el-form
        :model="message"
        :rules="rules"
        ref="message"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="消息标题" prop="messageTile">
          <el-input v-model="message.messageTile"></el-input>
        </el-form-item>
        <el-form-item label="标题内容" prop="messageDesc">
          <el-input type="textarea" v-model="message.messageDesc"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="messageModel = false">取 消</el-button>
        <el-button type="primary" @click="pushMessage('message')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { special } from "@/api/member";
import {
  getPermissionOptions,
  getCourseList,
  deleteCourse,
  pushMessage
} from "@/api/course";
import { delVideos } from "@/api/courseDetail";
import { getVideoPlatformType } from "@/api/company";

export default {
  data() {
    return {
      catId: "",
      courseList: [],
      wxPushShow: true,
      message: {
        messageTile: "",
        messageDesc: "",
        typeId: "",
        messageTypeStatus: 1,
        messageType: ""
      },
      messageModel: false,
      rules: {
        messageTile: [
          { required: true, message: "请输入消息标题", trigger: "blur" }
        ],
        messageDesc: [
          { required: true, message: "请输入消息内容", trigger: "change" }
        ]
      }
    };
  },
  methods: {
      pushMessage(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //成功
          pushMessage(this.message).then(res => {
            this.$message(res.data.data);
          });
          this.messageModel = false;
        } else {
          return false;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？");
    },
    getCourse(catId) {
      special({ catId: catId }).then(res => {
        this.courseList = res.data.data.data;
      });
    },
    linkToEdit(id) {
      const type = this.$route.name;
      this.$router.push({
        name: "editCourse",
        params: { courseType: type, courseId: id, columnId: -1 }
      });
    },
    linkToDetail(id, type) {
      if (type == 0) {
        getVideoPlatformType().then(res => {
          if (res.data.data[0].videoPlatformType == 1) {
            this.$router.push({
              name: "uploadVideo",
              params: { courseId: id }
            });
          } else {
            this.$router.push({
              name: "uploadVideoLeShi",
              params: { courseId: id }
            });
          }
        });
      } else if (type == 1) {
        this.$router.push({ name: "uploadAudio", params: { courseId: id } });
      }
      this.getCourse(this.catId);
    },
    handleDelete(index, id) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteCourse(id)
            .then(res => {
              if (res.data.statusCode == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.courseList.splice(index, 1);

                // 删除该课程下的所有视频
                delVideos(id);
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!"
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    messagePush(index) {
      this.isShowWechatPush = true;
      this.courseData = this.tableData[index];
    },
    linkToCourseComment(id) {
      this.$router.push({ name: "courseComment", params: { courseId: id } });
    },
    showMessageModel(val) {
      if (val.courseType == 0) {
        this.message.messageType = 1;
      } else if (val.courseType == 1) {
        this.message.messageType = 2;
      } else if (val.courseType == 2) {
        this.message.messageType = 3;
      }
      this.message.typeId = val.courseId;
      this.messageModel = true;
    },
    uploadText(type) {
      if (type == 0) {
        return "上传视频";
      } else if (type == 1) {
        return "上传音频";
      }
    }
  },
  mounted() {
    this.catId = this.$route.query.catId;
    this.getCourse(this.catId);
  }
};
</script>
